<template>
  <a-modal
    :title="'查看消息详情'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card style="background:#e8e8e8">
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <a-form
              :form="form"
              :labelCol="formItemLayout.labelCol"
              :wrapperCol="formItemLayout.wrapperCol"
            >
              <div style="background: #fff;height: 300px;padding-top: 30px;">
                <a-form-item
                  label="触发关键字"
                >
                  {{dataList.keyword}}
                </a-form-item>

                <a-form-item
                  label="匹配方式"
                >
                <span v-if="dataList.matchType == 1">精准匹配</span>
                <span v-if="dataList.matchType == 2">模糊/包含匹配</span>
                </a-form-item>
                <a-form-item
                  label="回复时效"
                >
                  <span v-if="dataList.businessId == 1">永久有效</span>
                  <span v-if="businessId == 2">{{startTime}} - {{endTime}}</span>
                </a-form-item>
                <a-form-item
                  label="回复人群"
                >
                  <span  v-for="(item,index)  in personList"
                      :key="index">
                      <span v-if="item.id == dataList.tagGroup">
                        {{ item.title }}
                      </span>
                  </span>
                  <span v-if="dataList.tagGroup == 0">全部</span>
                </a-form-item>
              </div>
              <div style="background: #fff; padding: 30px 0px 70px ;margin-top: 20px;">
                <a-form-item
                  label="回复内容"
                  :required="true"
                >
           
                    <span style="color: #2196f3;font-size: 18px;text-decoration: underline;"
                     v-for="item in topMenu"
                        :key="item.id"
                        :value="item.title">
                      <span
                       v-if="item.id == menuType"
                      >{{item.title}}</span> </span>
                  
                </a-form-item>
                <div class="text">
                  <a-form-item
                    class="content"
                    v-if="menuType == 1"
                  >
                    {{textMsgContent}}
                  </a-form-item>
                  <div
                    style="display:flex;justify-content:space-between"
                    v-if="menuType == 2"
                  >
                    <div
                      style="width:40%"
                    >
                      <div class="box">
    
                          <div style="padding:0; justify-content: center;">
                            <div>
                              <div style="width:100%">
                                <img
                                  class="photo"
                                  style="border-radius: 10px 10px 0 0;"
                                  :src="photoList.picUrl"
                                >
                              </div>
                              <div style="  height: 90px;padding: 0 20px;">
                                <div class="oneItem">
                                  <span style="  font-size: 18px;line-height: 50px;">
                                    {{photoList.title}}
                                  </span>

                                </div>
                                <span style="font-size: 16px;color: #9e9e9e;line-height: 10px;">
                                  {{photoList.description}}
                                </span>
                              </div>

                            </div>
                          </div>
                    
                      </div>
                    </div>
                    <div style="width:59%">
                      <a-form
                        :form="formList"
                        :labelCol="formItemLayout.labelCol"
                        :wrapperCol="formItemLayout.wrapperCol"
                      >
                        <div
                          v-for="(item, index) in fileds"
                          :key="index"
                          class="list"
                        >
                          <a-form-item
                            label="标题"
                            class="formItem"
                          >
                            <a-input
                            :disabled="true"
                              placeholder="请选择标题"
                              v-decorator="[`names[${index}][title]`, {initialValue: item['title'],validateTrigger: ['change', 'blur'],
                                           rules: [{required: true,whitespace: true,message: '请输入标题'}]}]"
                            ></a-input>
                          </a-form-item>
                          <a-form-item
                            label="备注"
                            class="formItem"
                            
                          >
                            <a-input
                              placeholder="请选择备注"
                              :disabled="true"
                              v-decorator="[`names[${index}][description]`,{initialValue: item['description'],validateTrigger: ['change', 'blur'],
                                            rules: [{required: true,whitespace: true,message: '请输入备注'}]}]"
                            ></a-input>
                          </a-form-item>
                          <a-form-item
                            class="formItem"
                            label="封面URL"
                          >
                            <a-input
                            :disabled="true"
                              placeholder="请选择封面URL"
                              v-decorator="[ `names[${index}][url]`, {initialValue: item['url'],validateTrigger: ['change', 'blur'],
                                           rules: [{required: true,whitespace: true,message: '请输入封面URL'}]}]"
                            ></a-input>
                          </a-form-item>
                          <a-form-item
                            class="formItem"
                            label="选择素材"
                          >
                            <a-select
                              allow-clear
                             :disabled="true"
                              size="large"
                              placeholder="请选择素材"
                              v-decorator="[`names[${index}][picUrl]`,{initialValue: item['picUrl'],rules: [{ required: true, message: '请选择素材' }]}]"
                            >
                              <a-select-option
                                :value="item.url"
                                v-for="(item,index)  in dataSource"
                                :key="index"
                              >
                                <span
                                  role="img"
                                  aria-label="China"
                                >
                                  <img
                                    style="width:30px"
                                    :src="item.url"
                                    onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                                  >
                                </span>
                                {{ item.originalFileName }}
                              </a-select-option>
                            </a-select>
                          </a-form-item>
                        </div>
                      </a-form>
                    </div>
                  </div>
                  <div
                    style="display:flex;justify-content:space-between"
                    v-if="menuType == 3"
                  >
                    <div style="width:40%">
                      <div class="box">
                        <a-list
                          item-layout="horizontal"
                          :data-source="photoList"
                        >
                          <a-list-item
                            slot="renderItem"
                            slot-scope="item, index"
                            style="padding:0;justify-content: center;"
                          >
                            <div v-if="index==0" style="width:100%">
                              <div
                                class="firstPhoto"
                                :style="{backgroundImage:`url(${item.picUrl})`}"
                              >
                                <span class="firstText">{{item.title}}</span>
                              </div>
                            </div>
                            <div
                              v-else
                              class="nextBox"
                            >
                              <div style="width:80%">
                                {{item.title}}
                              </div>
                              <div style="width:20%">
                                <img
                                  class="photo"
                                  style="height:60px"
                                  :src="item.picUrl"
                                >
                              </div>
                            </div>
                          </a-list-item>
                        </a-list>
                      </div>
                    </div>
                    <div style="width:59%">
                      <a-form
                        :form="formList"
                        :labelCol="formItemLayout.labelCol"
                        :wrapperCol="formItemLayout.wrapperCol"
                      >
                        <div
                          v-for="(item, index) in fileds"
                          :key="index"
                          class="list"
                        >
                          <div class="indexTip">第{{index+1}}条图文</div>
                         <a-form-item
                            label="标题"
                            class="formItem"
                          >
                            <a-input
                            :disabled="true"
                              placeholder="请选择标题"
                              v-decorator="[`names[${index}][title]`, {initialValue: item['title'],validateTrigger: ['change', 'blur'],
                                           rules: [{required: true,whitespace: true,message: '请输入标题'}]}]"
                            ></a-input>
                          </a-form-item>
                           <a-form-item
                            class="formItem"
                            label="封面URL"
                          >
                            <a-input
                            :disabled="true"
                              placeholder="请选择封面URL"
                              v-decorator="[ `names[${index}][url]`, {initialValue: item['url'],validateTrigger: ['change', 'blur'],
                                           rules: [{required: true,whitespace: true,message: '请输入封面URL'}]}]"
                            ></a-input>
                          </a-form-item>
                         <a-form-item
                            class="formItem"
                            label="选择素材"
                          >
                            <a-select
                              allow-clear
                             :disabled="true"
                              size="large"
                              placeholder="请选择素材"
                              v-decorator="[`names[${index}][picUrl]`,{initialValue: item['picUrl'],rules: [{ required: true, message: '请选择素材' }]}]"
                            >
                              <a-select-option
                                :value="item.url"
                                v-for="(item,index)  in dataSource"
                                :key="index"
                              >
                                <span
                                  role="img"
                                  aria-label="China"
                                >
                                  <img
                                    style="width:30px"
                                    :src="item.url"
                                    onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                                  >
                                </span>
                                {{ item.originalFileName }}
                              </a-select-option>
                            </a-select>
                          </a-form-item>
                        </div>
                      </a-form>
                    </div>
                  </div>
                  <div v-if="menuType == 4">
                    <div style="display:flex;justify-content: center;padding: 20px;align-items:center">
                      <div class="onePicture">
                        <img
                          style="object-fit: scale-down;width:200px;"
                          :src="pictureUrl"
                        >
                      </div>

                    </div>

                  </div>
                  <div
                    v-if="menuType == 5"
                    style="padding-bottom:10px"
                  >
                    <div style="display:flex;flex-direction: column;justify-content: center;padding: 20px;">
                      <div
                        class="onePicture"
                        style="background:#fff"
                      >
                        <iframe
                          :src='pictureUrl'
                          frameborder="0"
                          allowfullscreen
                          style="width: 700px;height: 80vh;"
                        ></iframe>

                      </div>
                    </div>
                      <a-form-item
                      label="标题"
                      :required="true"
                    >
                      <a-input
                      :disabled="true"
                        placeholder="请输入标题"
                        :maxLength="40"
                        v-decorator="[
                  `title`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入标题！'
                      }
                    ]
                  }
                ]"
                      />
                    </a-form-item>
                     <a-form-item
                      label="描述"
                      :required="true"
                      
                    >
                      <a-input  
                      :disabled="true"
                        placeholder="请输入描述"
                        v-decorator="[
                  `description`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入描述！'
                      }
                    ]
                  }
                ]"
                      />
                    </a-form-item>
                  </div>
                  <div
                    
                    style="padding-bottom:10px"
                  >
                    <div v-if="menuType == 6 || menuType == 7" style="display:flex;justify-content: center;padding: 20px;align-items:center">
                      <div
                        class="onePicture"
                        style="background:#fff"
                      >
                        <audio
                          :src="apiBaseUrl + '/api/gateway/basemgt-wx/WxMaterial/downloadVoiceFrequency?appid='+appid+'&mediaId='+mediaId"
                          autoplay="autoplay"
                          controls="controls"
                          ref="audio"
                        ></audio>

                      </div>
                    
                    </div>   
                   <div v-if="menuType == 6"> <a-form-item
                      label="标题"
                      :required="true"
                    >
                      <a-input
                      :disabled="true"
                        placeholder="请输入标题"
                        :maxLength="40"
                        v-decorator="[
                  `title`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入标题！'
                      }
                    ]
                  }
                ]"
                      />
                    </a-form-item>
                     <a-form-item
                      label="描述"
                      :required="true"
                      
                    >
                      <a-input  
                      :disabled="true"
                        placeholder="请输入描述"
                        v-decorator="[
                  `description`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入描述！'
                      }
                    ]
                  }
                ]"
                      />
                    </a-form-item></div>
                  </div>
                  <div
                    style="width:100%"
                    v-if="menuType == 8"
                  >
                    <a-form
                      :form="form"
                      :labelCol="formItemLayout.labelCol"
                      :wrapperCol="formItemLayout.wrapperCol"
                    >
                      <a-form-item
                        label="标题"
                        :required="true"
                      >
                        <a-input
                          allow-clear
                          placeholder="请输入标题"
                          :maxLength="40"
                          v-decorator="[
                  `templateName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入标题！'
                      }
                    ]
                  }
                ]"
                        />
                      </a-form-item>
                      <a-form-item
                        label="appid"
                        :required="true"
                      >
                        <a-input
                          allow-clear
                          placeholder="请输入appid"
                          :maxLength="40"
                          v-decorator="[
                  `templateName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入appid！'
                      }
                    ]
                  }
                ]"
                        />
                      </a-form-item>
                      <a-form-item
                        label="页面路径"
                        :required="true"
                      >
                        <a-input
                          allow-clear
                          placeholder="请输入页面路径"
                          v-decorator="[
                  `templateName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入页面路径！'
                      }
                    ]
                  }
                ]"
                        />
                      </a-form-item>
                      <a-form-item
                        label="封面素材id"
                        :required="true"
                      >
                        <a-input
                          allow-clear
                          placeholder="请输入封面素材id"
                          :maxLength="40"
                          v-decorator="[
                  `templateName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入封面素材id！'
                      }
                    ]
                  }
                ]"
                        />
                      </a-form-item>

                    </a-form>
                  </div>
                </div>
              </div>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </a-modal>

</template> 

<script>
import { getAction, postAction } from '@/api/manage'
const personList = [
  {
    id: 1,
    title: '全部关注'
  },
  {
    id: 2,
    title: '新增会员'
  },
  {
    id: 3,
    title: '生日月会员'
  }
]
const topMenu = [
  {
    id: 1,
    title: '文本消息'
  },
  {
    id: 2,
    title: '单图文'
  },
  {
    id: 3,
    title: '多图文'
  },
  {
    id: 4,
    title: '图片'
  },
  {
    id: 5,
    title: '视频'
  },
  {
    id: 6,
    title: '音频'
  },
   {
    id: 7,
    title: '语音'
  },
  {
    id: 8,
    title: '菜单'
  }
]
export default {
  props: {
    detail: {
      type: Object,
      default: null
    },
    appid: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      urlKey: 'basemgt-wx',
      id: '',
      startTime: '',
      endTime: '',
      dataList: {},
      dataSource: [],
      photoList:[],
      type: '',
      textMsgContent: '',
      personList,
      topMenu,
      businessId: 1,
      current: [],
      fileds: [],
      fileList: [],
      menuType: 1,
      names: [],
      pictureUrl: '',
      mediaId: '',
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 16 },
          xs: { span: 12 },
          sm: { span: 12 }
        }
      },
      loading: true,
      backPhotoList: [],
      pageNum: 1,
      apiBaseUrl:'',

      pageSize: 20,
      form: this.$form.createForm(this),
      formList: this.$form.createForm(this)
    }
  },
  created() {
     this.apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
    if (this.detail) {
      console.log(this.detail)
      const detail = this.detail
      this.id = detail.id
      this.businessId = detail.businessId
      this.startTime = detail.startTime
      this.endTime = detail.endTime
      this.dataList = detail
      this.menuType = detail.type
      this.current.push(detail.type)
      this.$nextTick(() => {
        this.form.setFieldsValue({
          keyword: detail.keyword,
          matchType: detail.matchType,
          tagGroup: detail.tagGroup
        })
      })
    }
  },
  mounted() {
    this.getPhotoList()
  },
  watch: {
    appid() {
      this.getMenuList()
    }
  },
  methods: {
    addList() {
      const obj = { title: '', url: '', picUrl: '', description: '' }
      let { fileds } = this
      fileds.push(obj)
      this.fileds = fileds
    },
    reset() {
      this.form.resetFields()
      this.$emit('closeDetail')
    },
    clear() {
      this.form.resetFields()
    },
    getPhotoList() {
      this.loading = true
      if (this.menuType == 6) {
        this.type = 2
      } else if (this.menuType == 5) {
        this.type = 3
      } else {
        this.type = 1
      }
      const params = {
        appid: this.appid,
        pageSize: 20,
        pageNum: 1,
        type: this.type
      }
      postAction(`${this.urlKey}/WxMaterial/findWxMaterialListByCondition`, params).then(data => {
        if (data.code == 200) {
          this.dataSource = data.data.records
        } else {
          this.$message.warning(data.msg || data.message)
        }
        this.loading = false
        this.getDetailList()
      })
    },
    getDetailList() {
      const params = {
        id: this.id
      }
      getAction(`${this.urlKey}/WxKeyword/findWxKeywordDetailById`, params).then(data => {
        if (data.code == 200) {
          this.textMsgContent = data.data.result.textMsgDTO.textMsgContent
          this.mediaId = data.data.result.imageMsgDTO.mediaId
          if (this.menuType == 2) {
             this.photoList = data.data.result.singViewArticleDTO
            this.fileds.push(data.data.result.singViewArticleDTO)
          }
           if (this.menuType == 3) {
             this.photoList = data.data.result.manyViewArticleDTO.manyViewArticleList 
            this.fileds = data.data.result.manyViewArticleDTO.manyViewArticleList 
          }
          if (this.menuType == 5) {
            this.mediaId = data.data.result.videoMsgDTO.mediaId
            this.form.setFieldsValue({
              title:data.data.result.videoMsgDTO.title,
              description:data.data.result.videoMsgDTO.description,
            })
          }
          if (this.menuType == 6) {
            this.mediaId = data.data.result.musicMsgDTO.mediaId
            this.form.setFieldsValue({
              title:data.data.result.musicMsgDTO.title,
              description:data.data.result.musicMsgDTO.description,
            })
          }
          if (this.menuType == 7) {
            this.mediaId = data.data.result.voiceMsgDTO.mediaId
          }
          this.dataSource.map(item => {
            if (item.mediaId == this.mediaId) {
              this.pictureUrl = item.url
            }
          })
        } else {
          this.$message.warning(data.msg || data.message)
        }
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>
.menu {
  position: relative;
  top: 35px;
  left: -90px;
}
.text {
  width: 75%;
  border: 1px solid #c8c9cc;
  margin: auto;
}
.text .content {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.list {
  background: #e8e8e8;
  padding: 10px;
  margin: 10px;
}
.formItem {
  margin-bottom: 10px;
}
.box {
  margin: 10px 0 0 10px;
  border-radius: 10px;
  box-shadow: 0 5px 15px -5px rgb(0 0 0 / 50%);
}
.photo {
  width: 100%;
  object-fit: scale-down;
}
.firstText {
  color: #fff;
  position: relative;
  top: 110px;
  font-size: 18px;
}
.firstPhoto {
  width: 100%;
  height: 180px;
  padding: 0 20px;
  border-radius: 10px 10px 0 0;
  background-size: 100% 100%;
}
.nextBox {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  height: 70px;
  width: 100%;
  align-items: center;
}
.indexTip {
  background: #fff;
  width: 100px;
  height: 30px;
  border-radius: 10px;
  line-height: 30px;
  color: #03a9f4;
  text-align: center;
  border: 1px solid #03a9f4;
}
.buttonDiv {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.button {
  border: 1px solid #9e9e9e;
  color: #9e9e9e;
}
.oneItem {
  width: 100%;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.onePicture {
  display: flex;
  background: #9e9e9e7d;
  align-items: center;
  border: 1px solid #9e9e9e7d;
}
</style>
